<template>
  <!--排行榜-->
  <div class="topList" id="app2">


    <div class="topList-content">
      <el-carousel :interval="4000" type="card" height="270px">
        <el-carousel-item v-for="(item, index) in banners" :key="index">
          <img :src="item.imageUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
      <div class="topList-head">推荐歌单</div>
      <ul class="topList-item">
        <li class="topList-img" v-for="(item, index) in list" :key="index" @click="toPlaylist(item.id)">
          <img :src="item.picUrl" alt="" class="image" />
          <div class="wen">{{ item.name }}</div>
        </li>
        <!-- <h3 class="name">11</h3> -->
      </ul>
      <div class="topList-head1">最新歌曲</div>
      <ul class="song-item">
        <li v-for="(item, index) in songList" :key="index" @dblclick="playMusic(item.id)">
          <img :src="item.picUrl" alt="" class="song-img" />
          <p class="song">{{ item.name }}</p>
          <p class="author">{{ item.song.artists[0].name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import axios from "axios";
  export default {
    methods: {
      toPlaylist(id) {
        this.$router.push("/playlists?q=" + id);
      },
      playMusic(id) {
        axios({
          url: "http://music.eleuu.com/song/url",
          method: "get",
          params: {
            id,
          },
        }).then((res) => {
          if (res.data.data[0].url != null) {
            this.$parent.$parent.$children[3].playmusic(id);
          } else {
            this.$message({
              message: "不能播放该歌曲哟",
              type: 'error'
            });
          }
        });
      },
    },
    created() {
      axios({
          url: "http://music.eleuu.com/banner",
          method: "get",
        }).then((res) => {
          console.log(res);
          this.banners = res.data.banners;
        }),
        axios({
          url: "http://music.eleuu.com/personalized",
          method: "get",
          params: {
            limit: 12,
          },
        }).then((res) => {
          this.list = res.data.result;
        }),
        axios({
          url: "http://music.eleuu.com/personalized/newsong",
          method: "get",
          params: {
            limit: 9,
          },
        }).then((res) => {
          console.log(res);
          this.songList = res.data.result;
        });
    },
    data() {
      return {
        banners: [],
        list: [],
        songList: [],
      };
    },
  };
</script>
<style scoped>
  .topList {
    /* border: white 1px solid; */
    position: absolute;
    top: -2%;
    left: 0%;
    width: 1300px;
    height: 100%;
    color: rgb(255, 255, 255, 0.6);
  }

  ul {
    list-style: none;
  }

  .topList-head {
    color: white;
    font-size: 20px;
    position: absolute;
    left: 2%;
    top: 60%;
  }

  .topList-head1 {
    color: white;
    font-size: 20px;
    position: absolute;
    left: 2%;
    top: 156%;
  }

  .topList-content {
    position: absolute;
    top: 0%;
    left: 18px;
    height: 100%;
    overflow: hidden;
    width: 1270px;
    overflow-y: scroll;
    /* border: 1px solid white; */
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(255, 255, 255, 0.7);
  }

  .image {
    width: 130px;
  }
.topList-item{
  position: relative;
    top: 50px;
}
  .topList-img {
    width: 170px;
    height: 130px;
    margin: 40px 20px;
    float: left;
  }

  .topList-img1 {
    width: 150px;
    height: 125px;
    margin: 40px 20px;
    float: left;
    position: relative;
    top: 70px;
  }

  element.style {
    height: 270px;
  }

  .el-carousel--horizontal {
    overflow: hidden;
    width: 1250px;
    height: 270px;
    position: relative;
    left: 5px;
  }

  img {
    width: 100%;
    height: 100%;
  }

  .wen {
    font-size: 14px;
    width: 130px;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-align: left;
    position: relative;
    left: 24px;
    top: 5px;
  }

  .song-item {
    position: absolute;
    left: 0%;
    top: 172%;
  }

  .song-item li {
    width: 547px;
    height: 150px;
    float: left;
    margin: 5px 15px;
    position: relative;
    left: 55px;
    overflow: hidden;
  }

  .song-img {
    position: absolute;
    left: 0px;
    width: 120px;
    height: 120px;
  }

  .song {
    position: absolute;
    left: 160px;
    top: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .author {
    position: absolute;
    left: 160px;
    top: 60px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
</style>